<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入bootstrap样式 -->
	<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<!-- 引入bootstrap-table样式 -->
	<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
	<!-- jquery -->
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<!-- bootstrap-table.min.js -->
	<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
	<!-- 引入中文语言包 -->
	<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="../js/ajax.js"></script>
	<style type="text/css">
		table thead tr th {
			text-align: center;
		}

		div.center {
			text-align: center;
		}
	</style>
</head>
<body>
<div style="padding:20px;" id="app">
	<div style="margin-top: 10px; margin-left: 10px">
		<form class="form-inline" method="post" onsubmit="return false;">
			<div class="form-group">
				<label for="stuName">学生姓名:</label>
				<input type="text" v-model="stuName" class="form-control">
			</div>
			<div class="form-group">
				<label for="stuAge">年龄:</label>
				<input type="text" v-model="stuAgeOne" style="width: 60px;" class="form-control"> ——
				<input type="text" v-model="stuAgeTwo" style="width: 60px;" class="form-control">
			</div>
			<div class="form-group">
				<label for="ip">学院:</label>
				<select class="form-control" style="width: 180px;" v-model="selectVal">
					<option value="">请选择</option>
					<option v-for="item in memList" :value="item.mid">{{item.mdep}}</option>
				</select>
			</div>
			<div class="form-group">
				<button class="btn btn-primary" @click="getStudentList">
					搜索
				</button>
				<button class="btn btn-primary" @click="clear">
					添加
				</button>
				<button class="btn btn-primary" @click="getStuIn">
					导出
				</button>
			</div>
		</form>
	</div>
	<div class="panel panel-primary">
		<div class="panel-heading">学生管理</div>
		<table class="table table-bordered table-striped text-center">
			<thead>
			<tr>
				<th>选择</th>
				<th>用户名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>学院</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<template v-for="row in dataList">
				<tr>
					<td><input type="checkbox"/></td>
					<td>{{row.stuName}}</td>
					<td>{{row.stuAge}}</td>
					<td>{{row.stuSex}}</td>
					<td>{{row.m.mdep}}</td>
					<td>{{row.stuReCord}}</td>
					<td><a href="#" @click="Edit(row)" class="btn btn-info">编辑</a>&nbsp;&nbsp;
						<a href="#" class="btn btn-danger"   @click="Delete(row.stuId)">删除</a></td>

				</tr>
			</template>
			<tr v-if="isShow">
				<td><input type="text" class="form-control" v-model="rowtemplate.stuName" /></td>
				<td><input type="text" class="form-control" v-model="rowtemplate.stuAge" /></td>
				<td>
					<select class="form-control" v-model="rowtemplate.stuSex">
						<option value=""></option>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</td>

				<td>
					<select class="form-control" v-model="rowtemplate.mid">
						<option value=""></option>
						<option v-for="item in memList" :value="item.mid"
								:key="item.mid"
								:label="item.mdep"
								:value="item.mdep" />
					</select>
				</td>
				<td><input type="text" class="form-control" v-model="rowtemplate.stuReCord" /></td>

				<td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
			</tr>
			</tbody>
		</table>
	</div>
	<div class="center">
		<el-pagination :current-page="current" @size-change="handleSizeChange" @current-change="handleCurrentChange"
					   :page-sizes="[10,20,30]" :page-size="pageSize" :pager-count="11" layout="total, sizes, prev, pager, next, jumper"
					   :total="pageCount">
		</el-pagination>
	</div>
</div>
<script src="js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
	//ViewModel
	var vue = new Vue({
		el: '#app',
		data: {
			rowtemplate: {
				stuId: 0,
				stuName: '',
				stuAge: '',
				stuSex: '',
				mid: {},
				stuReCord: ''
			},
			dataList: {},
			memList: [],
			pageSize: 10,
			pageCount: 100,
			current: 0,
			isShow: false,
			//条件区的select
			selectVal: '',
			//条件区的name
			stuName: '',
			stuAgeOne: '',
			stuAgeTwo: ''
		},
		mounted: function() {
			this.getStudentList();
			this.getMemList();
		},
		methods: {
			Save: function(event) {
				console.log()
				if (this.rowtemplate.stuId == 0) {
					//设置当前新增行的Id
					ajax({
						url: "http://localhost:8080/student/add", //请求地址
						data: this.rowtemplate,
						success: function(result) { //服务器返回的结果
							if (result.code == 0) {
								alert(result.msg);
							} else {
								alert("成功");
								window.location.reload();
							}
						}
					})
				} else {
					ajax({
						url: "http://localhost:8080/student/update", //请求地址
						data: this.rowtemplate,
						success: function(result) { //服务器返回的结果
							alert("成功");
							window.location.href = "";
						}
					})
				}

			},
			Delete: function(stuId) {
				var result = confirm('您确认删除吗？');
				ajax({
					url: "http://localhost:8080/student/delete", //请求地址
					data: { //需要携带的参数
						//token: ""
						stuId: parseInt(stuId)
					},
					success: function(result) { //服务器返回的结果
						/* alert("成功"); */

						window.location.href = "";
					}
				})
			},
			Edit: function(row) {
				this.rowtemplate = row;
				this.isShow = true;
				this.rowtemplate = {
					stuId: row.stuId,
					stuName: row.stuName,
					stuAge: row.stuAge,
					stuSex: row.stuSex,
					mid: row.m.mid,
					mdep: row.m.mdep,
					stuReCord: row.stuReCord
				}
				console.log(this.rowtemplate+"fgfhfgjhkjl");
				console.log(row);
			},
			getStudentList: function() {
				ajax({
					url: "http://localhost:8080/student/selectByPage", //请求地址
					dataType: "jsonp",
					data: { //需要携带的参数
						current: this.current,
						size: this.pageSize,
						stuName: this.stuName,
						mid: this.selectVal,
						stuAgeOne: this.stuAgeOne,
						stuAgeTwo: this.stuAgeTwo
					},
					success: function(result) {
						console.log(result)//服务器返回的结果
						vue.dataList = result.records; //将结果赋值给 msg
						vue.pageCount = result.total;
						vue.current = result.current;
					}
				})
			},
			getMemList: function() {
				ajax({
					url: "http://localhost:8080/membership/selectMemByPage", //请求地址
					data: { //需要携带的参数
						//token: "db34b40d-2c35-4546-a864-2e5489c1b04d"

					},
					success: function(result) { //服务器返回的结果
						vue.memList = result.records; //将结果赋值给 memList
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getStudentList();
			},
			handleCurrentChange(val) {
				this.current = val;
				this.getStudentList();
			},
			clear() {
				this.rowtemplate = {
					stuId: 0,
					stuName: '',
					stuAge: '',
					mid: '',
					stuReCord: ''
				}
				this.isShow = true;
			},
			getStuIn(){

			}
		}
	});
</script>
</body>
</html>
